<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>VTracer</title>
        <link rel="apple-touch-icon" sizes="192x192" href="./assets/apple-icon.png">
        <link rel="icon" type="image/png" sizes="192x192"  href="./assets/apple-icon.png">
        <!-- UIkit CSS -->
        <link rel="stylesheet" href="./uikit/css/uikit.min.css" />

        <!-- UIkit JS -->
        <script src="./uikit/js/uikit.min.js"></script>
        <script src="./uikit/js/uikit-icons.min.js"></script>
        <script type="text/javascript">
        (function(c,l,a,r,i,t,y){
            c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
            t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
            y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
        })(window, document, "clarity", "script", "403biw7tra");
        </script>
        <style>
        html, body {
            width: 100%;
            height: 100%;
        }
        .uk-dark body,
        .uk-dark .container {
            background: #fff;
        }
        .uk-dark #vc-logo-light {
            display: none;
        }
        .uk-light #vc-logo {
            display: none;
        }
        .uk-light body,
        .uk-light .container,
        .uk-light .uk-modal-dialog {
            background: #2e2e2e;
        }
        @media screen and (prefers-color-scheme: dark) {
            html {
                background: #2e2e2e;
            }
        }
        #droptext {
            background: #00275D;
            border: 2px dashed #CC972E;
        }
        #droptext.hovering {
            border: 2px dashed #fff;
        }
        .uk-navbar-right.uk-padding-small {
            padding-top: 0;
            padding-bottom: 0;
        }
        #export,
        .uk-button-group .uk-button.selected {
            color: #fff;
            background: #00275D;
            border-color: #CC972E;
        }
        .uk-dark #export,
        .uk-dark .uk-button-group .uk-button.selected {
            border-width: 2px;
        }
        .uk-dark #droptext {
            border-width: 4px;
        }
        .uk-button-group > button {
            padding-left: 10px;
            padding-right: 10px;
        }
        @media only screen and (min-width: 1280px) {
            .uk-button-group > button {
                padding-left: 25px;
                padding-right: 25px;
            }
        }
        #canvas-container {
            position: relative;
            height: max-content;
        }
        #svg, #frame {
            position: absolute;
            width: 100%;
            margin-bottom: 50px;
        }
        #svg > path:hover {
            stroke: #ff0;
        }
        #droptext {
            height: 480px;
            color: #CC972E;
        }
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            background: #00275D;
            border-color: #CC972E;
        }
        input[type=range]::-moz-range-thumb {
            background: #00275D;
            border-color: #CC972E;
        }
        input[type=range]::-ms-thumb {
            background: #00275D;
            border-color: #CC972E;
        }
        #drop, #gallery, #options {
            border-top: 1px solid #686868;
        }
        #gallery {
            padding-bottom: 0;
        }
        .galleryitem {
            cursor: pointer;
            padding: 2px;
            margin: 1px;
        }
        .galleryitem:hover {
            padding: 0px;
            margin: 0px;
            border: 2px solid #CC972E;
        }
        .galleryitem img {
            max-height: 120px;
        }
        .uk-text-meta {
            font-size: 12px;
        }
        </style>
    </head>

    <body class="uk-dark">
        <input type="file" id="imageInput" accept="image/*" style="display: none;">
        <div class="container uk-padding" uk-grid>
            <div class="uk-width-1-1 uk-navbar-container uk-navbar-transparent" uk-navbar>
                <div class="uk-navbar-left uk-text-large uk-text-bolder">
                    <a id="vc-logo" class="uk-logo" href="//www.visioncortex.org"><img style="height: 50px; margin: -30px 0 -25px 0;" src="./assets/visioncortex-logo.svg"></a>
                    <a id="vc-logo-light" class="uk-logo" href="//www.visioncortex.org"><img style="height: 50px; margin: -30px 0 -25px 0;" src="./assets/visioncortex-logo-light.svg"></a>
                    &nbsp;
                    / VTracer
                </div>
                <div class="uk-navbar-right uk-padding-small">
                    <a class="uk-button uk-button-default" href="//www.visioncortex.org/vtracer-docs">Article</a>
                    &nbsp;&nbsp;
                    <a class="uk-button uk-button-default" href="//github.com/visioncortex/vtracer">GitHub</a>
                    &nbsp;&nbsp;
                    <a id="export" class="uk-button uk-button-primary">Download as SVG</a>    
                </div>
            </div>
            <div id="progressregion" class="uk-width-1-1 uk-padding-small" style="display: none;">
                <progress id="progressbar" class="uk-progress uk-align-right" value="0" max="100" style="width: 98%;"></progress>
            </div>
            <div class="uk-width-3-4">
                <div id="drop" class="uk-padding uk-flex uk-flex-center">
                    <div id="canvas-container" class="uk-width-1-1">
                        <div id="droptext" class="uk-flex uk-flex-middle uk-flex-center">
                            <p>Drag an image here, Cmd-V to paste or <a href="#" id="imageSelect">Select file</a></p>
                        </div>
                        <canvas id="frame"></canvas>
                        <svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
                    </div>
                </div>
                <div id="gallery" class="uk-padding">
                    <div class="uk-inline" uk-slider>
                        <ul id="galleryslider" class="uk-slider-items uk-child-width-1-6 uk-grid uk-grid-small">
                            
                        </ul>
                        <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
                        <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
                    </div>
                    <a class="uk-align-right uk-text-meta" style="margin:-5px;" uk-toggle="target: #credits-modal">Photo Credits</a>
                </div>
            </div>
            <div id="options" class="uk-width-1-4 uk-height-1-1 uk-grid-small uk-flex uk-flex-center" uk-grid>

                <div class="uk-width-1-1 uk-flex uk-flex-right">
                    &nbsp;
                </div>

                <p></p>

                <div class="uk-width-1-1 uk-flex uk-flex-right">
                    <div class="uk-text-bold" uk-tooltip="pos:left; title: Algorithm for segmentation and grouping of pixel clusters">
                        Clustering
                    </div>
                </div>

                <div class="uk-width-1-1 uk-flex uk-flex-right">
                    <div class="uk-button-group">
                        <button id="clustering-binary" class="uk-button uk-button-default" uk-tooltip="Black & White (Binary Image)">B/W</button>
                        <button id="clustering-color" class="selected uk-button uk-button-default" uk-tooltip="True Color Image">Color</button>
                    </div>
                </div>

                <div class="clustering-color-options uk-width-1-1 uk-flex uk-flex-right">
                    <div class="uk-button-group">
                        <button id="clustering-cutout" class="uk-button uk-button-default uk-button-small" uk-tooltip="Shapes disjoint with others">Cutout</button>
                        <button id="clustering-stacked" class="selected uk-button uk-button-default uk-button-small" uk-tooltip="Stack shapes on top of another">Stacked</button>
                    </div>
                </div>

                <div class="uk-width-1-1 uk-flex uk-flex-right">
                    <div uk-tooltip="pos: left; title: Discard patches small than X px in size">
                        Filter Speckle <span class="uk-text-meta">(Cleaner)</span>
                    </div>
                </div>
                <div id="filterspecklevalue" class="uk-width-1-6">
                    4
                </div>
                <div class="uk-width-5-6">
                    <input id="filterspeckle" class="uk-range" type="range" min="0" max="128" step="1" value="4">
                </div>

                <div class="clustering-color-options uk-width-1-1 uk-flex uk-flex-right">
                    <div uk-tooltip="pos: left; title: Number of significant bits to use in a RGB channel">
                        Color Precision <span class="uk-text-meta">(More accurate)</span>
                    </div>
                </div>
                <div id="colorprecisionvalue" class="clustering-color-options uk-width-1-6">
                    6
                </div>
                <div class="clustering-color-options uk-width-5-6">
                    <input id="colorprecision" class="uk-range" type="range" min="1" max="8" step="1" value="6">
                </div>

                <div class="clustering-color-options uk-width-1-1 uk-flex uk-flex-right">
                    <div uk-tooltip="pos: left; title: Color difference between gradient layers">
                        Gradient Step <span class="uk-text-meta">(Less layers)</span>
                    </div>
                </div>
                <div id="layerdifferencevalue" class="clustering-color-options uk-width-1-6">
                    16
                </div>
                <div class="clustering-color-options uk-width-5-6">
                    <input id="layerdifference" class="uk-range" type="range" min="0" max="128" step="1" value="16">
                </div>

                <div class="uk-width-1-1 uk-flex uk-flex-right">
                    <div class="uk-text-bold" uk-tooltip="pos: left; title: Algorithm for converting clusters to shapes">
                        Curve Fitting
                    </div>
                </div>

                <div class="uk-width-1-1 uk-flex uk-flex-right">
                    <div class="uk-button-group">
                        <button id="none" class="uk-button uk-button-default" uk-tooltip="Exact cluster boundary">PIXEL</button>
                        <button id="polygon" class="uk-button uk-button-default" uk-tooltip="Simplify to Polygon">Polygon</button>
                        <button id="spline" class="selected uk-button uk-button-default" uk-tooltip="Smooth and Curve-fit">Spline</button>
                    </div>
                </div>

                <div class="spline-options uk-width-1-1 uk-flex uk-flex-right">
                    <div uk-tooltip="pos: left; title: Minimum Momentary Angle (in degrees) to be considered a corner (to be kept after smoothing)">
                        Corner Threshold <span class="uk-text-meta">(Smoother)</span>
                    </div>
                </div>
                <div id="cornervalue" class="spline-options uk-width-1-6">
                    60
                </div>
                <div class="spline-options uk-width-5-6">
                    <input id="corner" class="uk-range" type="range" min="0" max="180" step="1" value="60">
                </div>

                <div class="spline-options uk-width-1-1 uk-flex uk-flex-right">
                    <div uk-tooltip="pos: left; title: Perform Iterative Subdivide Smooth until all segments are shorter than this length">
                        Segment Length <span class="uk-text-meta">(More coarse)</span>
                    </div>
                </div>
                <div id="lengthvalue" class="spline-options uk-width-1-6">
                    4
                </div>
                <div class="spline-options uk-width-5-6">
                    <input id="length" class="uk-range" type="range" min="3.5" max="10" step="0.5" value="4">
                </div>

                <div class="spline-options uk-width-1-1 uk-flex uk-flex-right">
                    <div uk-tooltip="pos: left; title: Minimum Angle Displacement (in degrees) to be considered a cutting point between curves">
                        Splice Threshold <span class="uk-text-meta">(Less accurate)</span>
                    </div>
                </div>
                <div id="splicevalue" class="spline-options uk-width-1-6">
                    45
                </div>
                <div class="spline-options uk-width-5-6">
                    <input id="splice" class="uk-range" type="range" min="0" max="180" step="1" value="45">
                </div>
                
                <div style="display: none">
                <div class="spline-options uk-width-1-1 uk-flex uk-flex-right">
                    <div uk-tooltip="pos: left; title: Number of decimal places used in svg path string">
                        Path Precision <span class="uk-text-meta">(More digits)</span>
                    </div>
                </div>
                <div id="pathprecisionvalue" class="spline-options uk-width-1-6">
                    8
                </div>
                <div class="spline-options uk-width-5-6">
                    <input id="pathprecision" class="uk-range" type="range" min="0" max="16" step="1" value="8">
                </div>
                </div>
            </div>
        </div>

        <div id="credits-modal" uk-modal>
            <div id="credits-modal-content" class="uk-modal-dialog uk-modal-body">
                <p>Image Credits</p>
            </div>
        </div>

        <script>
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            document.body.classList.remove('uk-dark');
            document.body.classList.add('uk-light');
        }
        </script>
        <script src="./bootstrap.js"></script>
    </body>
</html>
